<template>
 <div class="wrapper">
 <!-- header部分 -->
 <header>
 <p>用户登陆</p>
 <div class="back-btn" @click="goBack()"><i class="fa fa-arrow-left"></i></div>
 </header>
 <!-- 表单部分 -->
 <ul class="form-box">
 <li>
 <div class="title">
 手机号码：
 </div>
 <div class="content">
 <input type="text" v-model="userId" placeholder="手机号码">
 </div>
 </li>
 <li>
 <div class="title">
 密码：
 </div>
 <div class="content">
 <input type="password" v-model="password" placeholder="密码">
 </div>
 </li>
 </ul>
 <div class="button-login">
 <button @click="login">登陆</button>
 </div>
 <div class="button-register">
 <button @click="register">去注册</button>
 </div>
 <div class="bl"></div>
 <!-- 底部菜单部分 -->
 <Footer></Footer>
 </div>

 
</template>
<script>
 import Footer from '../components/Footer.vue';
 
 export default{
 name:'Login',
 data(){
 return {
 userId:'',
 password:''
 }
 },
 methods:{
goBack() {
	this.$router.back();
},
 login(){
 if(this.userId==''){
 alert('手机号码不能为空！');
 return;
 }
 if(this.password==''){
 alert('密码不能为空！');
 return;
 }
 
 //登录请求
 this.$axios.post('UserController/getUserByIdByPass',this.$qs.stringify({
 userId:this.userId,
 password:this.password
 })).then(response=>{
 let user = response.data;
 if(user==null){
 alert('用户名或密码不正确！');
 }else{
 //sessionstorage有容量限制，为了防止数据溢出，所以不将userImg数据放入session
中
 user.userImg = '';
 this.$setSessionStorage('user',user);
 this.$router.go(-1);
 }
 }).catch(error=>{
 console.error(error);
 });
 },
 register(){
 this.$router.push({path:'register'});
 }
 },
 components:{
 Footer
 }
 }
 
 
</script>
<style scoped>
 /****************** 总容器 ******************/
 .wrapper {
 width: 100%;
 height: 100%;
 }
 /****************** header部分 ******************/
 .wrapper header {
 width: 100%;
 height: 12vw;
 background-color: #0097FF;
 color: #fff;
 font-size: 4.8vw;
 position: fixed;
 left: 0;
 top: 0;
 z-index: 1000;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 /****************** 表单部分 ******************/
 .wrapper .form-box {
 width: 100%;
 margin-top: 12vw;
 }
 .wrapper .form-box li {
 box-sizing: border-box;
 padding: 4vw 3vw 0 3vw;
 display: flex;
 align-items: center;
 }
 .wrapper .form-box li .title {
 flex: 0 0 18vw;
 font-size: 3vw;
 font-weight: 700;
 color: #666;
 }
 .wrapper .form-box li .content {
 flex: 1;
 }
 .wrapper .form-box li .content input {
 border: none;
 outline: none;
 width: 100%;
 height: 4vw;
 font-size: 3vw;
 }
 .wrapper .button-login {
 width: 100%;
 box-sizing: border-box;
 padding: 4vw 3vw 0 3vw;
 }
 .wrapper .button-login button {
 width: 100%;
 height: 10vw;
 font-size: 3.8vw;
 font-weight: 700;
 color: #fff;
 background-color: #38CA73;
 border-radius: 4px;
 border: none;
 outline: none;
 }
 .wrapper .button-register {
 width: 100%;
 box-sizing: border-box;
 padding: 4vw 3vw 0 3vw;
 }
 .wrapper .button-register button {
 width: 100%;
 height: 10vw;
 font-size: 3.8vw;
 font-weight: 700;
 /*与上面登陆按钮不同的只有颜色、背景色、边框不同*/
 color: #666;
 background-color: #EEE;
 border: solid 1px #DDD;
 border-radius: 4px;
 border: none;
 outline: none;
 }
 /****************** 底部菜单部分 ******************/
 .wrapper .footer {
 width: 100%;height: 14vw;
 border-top: solid 1px #DDD;
 background-color: #fff;
 position: fixed;
 left: 0;
 bottom: 0;
 display: flex;
 justify-content: space-around;
 align-items: center;
 }
 .wrapper .footer li {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 color: #999;
 user-select: none;
 cursor: pointer;
 }
 .wrapper .footer li p {
 font-size: 2.8vw;
 }
 .wrapper .footer li i {
 font-size: 5vw;
 }
 .wrapper .bl{
 	width: 100%;
 	height: 20vw;
 	color:#ffffff;
 }
 .wrapper .back-btn {
    position: fixed;
    top: 2vw;
    left: 2vw;
    font-size: 4vw;
    color: #fff;
    cursor: pointer;
    user-select: none;
    z-index: 1000;
}
</style>
